<!--
 * :Author: Alice.fang
 * :Date: 2022-10-14 14:33:27
 * :LastEditors: Alice.fang
 * :LastEditTime: 2022-10-28 11:55:33
 * :Description: 
-->
<template>
    <!-- 判断当前页面是否显示，如果hide为true，则不渲染该菜单 -->
    <div v-if="!item.meta.hide">
        <!-- 根菜单 -->
        <MenuLink :to="resolvePath()" v-if="!item.children">
            <el-menu-item :index="resolvePath()">
                <i :class="item.meta.icon || ''"></i>
                <span slot="title" style="font-size: 16px; margin-left: 0px">{{ $t(item.meta.title) }}</span>
            </el-menu-item>
        </MenuLink>

        <!-- 可展开菜单 -->
        <el-submenu :index="resolvePath()" v-else>
            <template slot="title">
                <i :class="item.meta.icon"></i>
                <span slot="title" style="font-size: 16px; margin-left: 0px">{{ $t(item.meta.title) }}</span>
            </template>
            <!-- 这里递归去展示多级菜单 -->
            <menu-item
                style="position: relative; padding-left: 0px"
                :id="String(route.path).replace(/\//g, '') + 'ByTitle'"
                v-for="(route, index) in item.children"
                :key="index"
                :item="route"
                :fatherPath="resolvePath(route.path)"
                :tabindex="index + 1"
                @keyup.enter.native="tabJump(resolvePath(route.path))"
                class="sub-menu-design"
            >
            </menu-item>
        </el-submenu>
    </div>
</template>

<script>
// 引入path用来处理路径
import path from 'path';
import MenuLink from './MenuLink.vue';

export default {
    name: 'MenuItem',

    components: {
        MenuLink
    },

    props: {
        item: {
            type: Object,
            default: null
        },
        fatherPath: {
            type: String,
            default: ''
        }
    },

    data() {
        return {};
    },

    created() {},

    methods: {
        tabJump(jumpUrl) {
            //alert('jumpUrl=' + jumpUrl);
            this.$router.replace(jumpUrl);
        },
        isExternal(path) {
            return /^(https?:|mailto:|tel:)/.test(path);
        },
        resolvePath(routePath = '') {
            if (this.isExternal(routePath)) {
                return routePath;
            }
            if (this.isExternal(this.fatherPath)) {
                return this.fatherPath;
            }
            return path.resolve(this.fatherPath, routePath);
        }
    }
};
</script>
<style lang="less">
@import '@/assets/css/theme_blue/menuitem.less';
</style>
